<template>
       <div class="main-box-right">
                <div class="main-box-right-top">
                    <router-link to="/personal/information">
                        <img :src="userinfo.avatar?userinfo.avatar:'#'" class="user-src">
                    </router-link>
                    <h2 class="nickname">
                        {{userinfo.userNickname}}
                    </h2>
                    <router-link to="/personal/information" class="user-information">个人信息设置 ></router-link>
                    <div class="main-box-right-top-part">
                        <div>
                            <router-link to="/personal/order/status=0">全部预约</router-link>
                        </div>
                        <div>
                            <router-link to="/personal/order/status=1">已完成</router-link>
                        </div>
                        <div>
                            <router-link to="/personal/order/status=2">未进行</router-link>
                        </div>
                        <div>
                            <router-link to="/personal/order/status=3">待评价</router-link>
                        </div>
                    </div>
                </div>
                  <Guesslike></Guesslike>
        </div>
</template>

<script>
import {getuserInfo} from '../../../api/personalData/information/editInformation'
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import Guesslike from './Guesslike.vue'
export default {
    name:'MainBoxRight',
    components:{Guesslike},
    data() {
      return {
        userinfo:{}
      }
    },
    mounted(){
      console.log(this.$store.state);
    },
    methods:{
       getUserinfo(){
        const user = jwtDecode(cookie.getToken());
        getuserInfo({userId:user.userId}).then(data=>{
            const list =data.data.data
             this.userinfo = list
             console.log('@@',list);
        })
      }
    },
    created(){
      this.getUserinfo();
    }

}
</script>
<style lang="less" scoped>
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
     .main-box-right {
      float: left;
      margin-left: 20px;
      display: inline-block;
      width: 900px;
      padding-bottom: 20px;
      .main-box-right-top {
        width: 100%;
        height: 300px;
        border-radius: 4px;
        border: 1px solid #e5e5e5;
        background: #76d4ff;
        position: relative;
        .user-src {
          width: 100px;
          border-radius: 50%;
          border: 10px solid rgba(189, 189, 189, 0.5);
          position: absolute;
          top: 40px;
          left: 50px;
        }
        .nickname {
          display: inline-block;
          position: absolute;
          font-weight: 400;
          top: 75px;
          left: 190px;
        }
        .user-information {
          color: #000000;
          position: absolute;
          top: 90px;
          right: 40px;
        }
        .main-box-right-top-part {
          border-bottom: 1px solid #e5e5e5;
          width: 100%;
          height: 100px;
          position: absolute;
          background-color: #ffffff;
          bottom: -1px;
          display: flex;
          div {
            flex-grow: 1;
            text-align: center;
            a {
                color: black;
              display: inline-block;
              line-height: 100px;
              &:hover {
                color: @hovercolor;
                cursor: pointer;
              }
            }
          }
        }
      }
     
    }
</style>
